const state = {
    navTheme: localStorage.getItem("navTheme") || 'light',
    primaryColor: localStorage.getItem("primaryColor") || "#1890FF",
    colorWeak: JSON.parse(localStorage.getItem("colorWeak") || false),
    fixedHeader: JSON.parse(localStorage.getItem("fixedHeader") || false),
    fixSiderbar: JSON.parse(localStorage.getItem("fixSiderbar") || false),
}

const mutations = {
    SET_THEME: (state, theme) => {
        state.navTheme = theme
    },
    SET_COLOR: (state, color) => {
        state.primaryColor = color
    },
    SET_COLOR_WEAK: (state, checked) => {
        state.colorWeak = checked
    },
    SET_FIXED_HEADER: (state, fixed) => {
        state.fixedHeader = fixed
    },
    SET_FIXED_SIDERBAR: (state, fixed) => {
        state.fixSiderbar = fixed
    },
}

const actions = {
    ToggleTheme({ commit }, theme) {
        localStorage.setItem("navTheme", theme)
        commit('SET_THEME', theme)
        return localStorage.getItem("navTheme")
    },
    ToggleColor({ commit }, color) {
        localStorage.setItem("primaryColor", color)
        commit('SET_COLOR', color)
        return localStorage.getItem("primaryColor")
    },
    ToggleWeak({ commit }, checked) {
        localStorage.setItem("colorWeak", checked)
        commit('SET_COLOR_WEAK', checked)
        return localStorage.getItem("colorWeak")
    },
    ToggleFixedHeader({ commit }, fixed) {
        localStorage.setItem("fixedHeader", fixed)
        commit('SET_FIXED_HEADER', fixed)
        return localStorage.getItem("fixedHeader")
    },
    ToggleFixSiderbar({ commit }, fixed) {
        localStorage.setItem("fixSiderbar", fixed)
        commit('SET_FIXED_SIDERBAR', fixed)
        return localStorage.getItem("fixSiderbar")
    }
}

export default {
    namespaced: true,
    state,
    mutations,
    actions
}
